// ==================== 主题变量定义 ====================

// 导入Sass内置模块
@use 'sass:map';

// 基础颜色调色板
$colors: (
  // 主色调
  primary: (
    50: #f0f9ff,
    100: #e0f2fe,
    200: #bae6fd,
    300: #7dd3fc,
    400: #38bdf8,
    500: #0ea5e9,
    600: #0284c7,
    700: #0369a1,
    800: #075985,
    900: #0c4a6e,
  ),
  
  // 成功色
  success: (
    50: #f0fdf4,
    100: #dcfce7,
    200: #bbf7d0,
    300: #86efac,
    400: #4ade80,
    500: #22c55e,
    600: #16a34a,
    700: #15803d,
    800: #166534,
    900: #14532d,
  ),
  
  // 警告色
  warning: (
    50: #fffbeb,
    100: #fef3c7,
    200: #fde68a,
    300: #fcd34d,
    400: #fbbf24,
    500: #f59e0b,
    600: #d97706,
    700: #b45309,
    800: #92400e,
    900: #78350f,
  ),
  
  // 错误色
  danger: (
    50: #fef2f2,
    100: #fee2e2,
    200: #fecaca,
    300: #fca5a5,
    400: #f87171,
    500: #ef4444,
    600: #dc2626,
    700: #b91c1c,
    800: #991b1b,
    900: #7f1d1d,
  ),
  
  // 中性色
  gray: (
    50: #f9fafb,
    100: #f3f4f6,
    200: #e5e7eb,
    300: #d1d5db,
    400: #9ca3af,
    500: #6b7280,
    600: #4b5563,
    700: #374151,
    800: #1f2937,
    900: #111827,
  )
);

// ==================== 日间主题 ====================
.theme-light {
  // 基础背景色
  --bg-color-primary: #{map.get(map.get($colors, gray), 50)};
  --bg-color-secondary: #{map.get(map.get($colors, gray), 100)};
  --bg-color-tertiary: #ffffff;

  // 文本颜色
  --text-color-primary: #{map.get(map.get($colors, gray), 900)};
  --text-color-secondary: #{map.get(map.get($colors, gray), 600)};
  --text-color-tertiary: #{map.get(map.get($colors, gray), 400)};

  // 边框颜色
  --border-color-light: #{map.get(map.get($colors, gray), 200)};
  --border-color-base: #{map.get(map.get($colors, gray), 300)};
  --border-color-dark: #{map.get(map.get($colors, gray), 400)};

  // 阴影
  --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-base: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-dark: 0 10px 15px rgba(0, 0, 0, 0.1);

  // 覆盖层
  --overlay-color: rgba(0, 0, 0, 0.5);

  // 功能色
  --color-success: #{map.get(map.get($colors, success), 500)};
  --color-warning: #{map.get(map.get($colors, warning), 500)};
  --color-danger: #{map.get(map.get($colors, danger), 500)};
  --color-info: #{map.get(map.get($colors, primary), 500)};
}

// ==================== 夜间主题 ====================
.theme-dark {
  // 基础背景色
  --bg-color-primary: #{map.get(map.get($colors, gray), 900)};
  --bg-color-secondary: #{map.get(map.get($colors, gray), 800)};
  --bg-color-tertiary: #{map.get(map.get($colors, gray), 700)};

  // 文本颜色
  --text-color-primary: #{map.get(map.get($colors, gray), 50)};
  --text-color-secondary: #{map.get(map.get($colors, gray), 300)};
  --text-color-tertiary: #{map.get(map.get($colors, gray), 400)};

  // 边框颜色
  --border-color-light: #{map.get(map.get($colors, gray), 700)};
  --border-color-base: #{map.get(map.get($colors, gray), 600)};
  --border-color-dark: #{map.get(map.get($colors, gray), 500)};

  // 阴影
  --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-base: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-dark: 0 10px 15px rgba(0, 0, 0, 0.3);

  // 覆盖层
  --overlay-color: rgba(0, 0, 0, 0.7);

  // 功能色
  --color-success: #{map.get(map.get($colors, success), 400)};
  --color-warning: #{map.get(map.get($colors, warning), 400)};
  --color-danger: #{map.get(map.get($colors, danger), 400)};
  --color-info: #{map.get(map.get($colors, primary), 400)};
}

// ==================== 个性化主题色彩 ====================

// 默认蓝色主题
.theme-default {
  --theme-primary: #{map.get(map.get($colors, primary), 500)};
  --theme-primary-light: #{map.get(map.get($colors, primary), 400)};
  --theme-primary-dark: #{map.get(map.get($colors, primary), 600)};
  --theme-primary-bg: #{map.get(map.get($colors, primary), 50)};
  --theme-primary-shadow: rgba(14, 165, 233, 0.3);
}

// 绿色主题
.theme-green {
  --theme-primary: #{map.get(map.get($colors, success), 500)};
  --theme-primary-light: #{map.get(map.get($colors, success), 400)};
  --theme-primary-dark: #{map.get(map.get($colors, success), 600)};
  --theme-primary-bg: #{map.get(map.get($colors, success), 50)};
  --theme-primary-shadow: rgba(34, 197, 94, 0.3);
}

// 紫色主题
.theme-purple {
  --theme-primary: #8b5cf6;
  --theme-primary-light: #a78bfa;
  --theme-primary-dark: #7c3aed;
  --theme-primary-bg: #f3f4f6;
  --theme-primary-shadow: rgba(139, 92, 246, 0.3);
}

// 橙色主题
.theme-orange {
  --theme-primary: #{map.get(map.get($colors, warning), 500)};
  --theme-primary-light: #{map.get(map.get($colors, warning), 400)};
  --theme-primary-dark: #{map.get(map.get($colors, warning), 600)};
  --theme-primary-bg: #{map.get(map.get($colors, warning), 50)};
  --theme-primary-shadow: rgba(245, 158, 11, 0.3);
}

// 蓝色主题
.theme-blue {
  --theme-primary: #3b82f6;
  --theme-primary-light: #60a5fa;
  --theme-primary-dark: #2563eb;
  --theme-primary-bg: #eff6ff;
  --theme-primary-shadow: rgba(59, 130, 246, 0.3);
}

// ==================== 暗色主题下的个性化色彩调整 ====================
.theme-dark {
  &.theme-default {
    --theme-primary-bg: #{map.get(map.get($colors, primary), 900)};
  }

  &.theme-green {
    --theme-primary-bg: #{map.get(map.get($colors, success), 900)};
  }

  &.theme-purple {
    --theme-primary-bg: #581c87;
  }

  &.theme-orange {
    --theme-primary-bg: #{map.get(map.get($colors, warning), 900)};
  }
  
  &.theme-blue {
    --theme-primary-bg: #1e3a8a;
  }
}

// ==================== 主题过渡动画 ====================
html {
  transition: background-color 0.3s ease, color 0.3s ease;
}

body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

// 所有使用主题变量的元素都添加过渡
* {
  transition: 
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
}

// ==================== 主题应用 ====================

// 页面背景
html {
  background-color: var(--bg-color-primary);
  color: var(--text-color-primary);
}

body {
  background-color: var(--bg-color-primary);
  color: var(--text-color-primary);
}

// 卡片样式
.theme-card {
  background-color: var(--bg-color-tertiary);
  border: 1px solid var(--border-color-light);
  box-shadow: var(--shadow-light);
  
  &:hover {
    box-shadow: var(--shadow-base);
  }
}

// 按钮主题色
.theme-button-primary {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
  color: white;
  
  &:hover {
    background-color: var(--theme-primary-dark);
    border-color: var(--theme-primary-dark);
  }
  
  &:focus {
    box-shadow: 0 0 0 3px var(--theme-primary-bg);
  }
}

// 链接主题色
.theme-link {
  color: var(--theme-primary);
  
  &:hover {
    color: var(--theme-primary-dark);
  }
}

// 输入框样式
.theme-input {
  background-color: var(--bg-color-tertiary);
  border-color: var(--border-color-base);
  color: var(--text-color-primary);
  
  &:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px var(--theme-primary-bg);
  }
  
  &::placeholder {
    color: var(--text-color-tertiary);
  }
}

// 导航栏样式
.theme-navbar {
  background-color: var(--bg-color-tertiary);
  border-bottom: 1px solid var(--border-color-light);
  box-shadow: var(--shadow-light);
}

// 侧边栏样式
.theme-sidebar {
  background-color: var(--bg-color-secondary);
  border-right: 1px solid var(--border-color-light);
}

// 内容区域
.theme-content {
  background-color: var(--bg-color-primary);
}

// 模态框覆盖层
.theme-overlay {
  background-color: var(--overlay-color);
}
